<template>
	<gui-page>
		<template v-slot:gBody>
			<view style="padding:50rpx;">	
				<form @submit="submit">
					<view class="items-line item-form gui-flex gui-column">
						<view class="items-line gui-list-items">
							<view class="item-text gui-flex gui-align-items-center">旧密码</view>
							<view class="item-input gui-flex gui-align-items-center">
								<input class="item-input-text" type="password" name="oldPassword" @input="inputOld"
								v-model="oldPassword" placeholder="请输入旧密码" placeholder-class="holder" /> 
							</view>
							<view class="arrow-right gui-list-arrow-right gui-icons gui-color-black" @click="oldTipShow">&#xe601;</view>
						</view>
						<view v-show="oldTips" class="gui-text-center gui-color-red gui-text-small">请输入旧密码</view>
					</view>
					<view class="items-line item-form gui-flex gui-column">
						<view class="items-line gui-list-items">
							<view class="item-text gui-flex gui-align-items-center">新密码</view>
							<view class="item-input gui-flex gui-align-items-center">
								<input class="item-input-text" type="password" name="newPassword" @input="inputNew"
								v-model="newPassword" placeholder="请输入新密码" placeholder-class="holder" /> 
							</view>
							<view class="arrow-right gui-list-arrow-right gui-icons gui-color-black" @click="newTipShow">&#xe601;</view>
						</view>
						<view v-show="newTips" class="gui-text-center gui-color-red gui-text-small">请输入新密码</view>
					</view>
					<view class="items-line item-form gui-flex gui-column">
						<view class="items-line gui-list-items">
							<view class="item-text gui-flex gui-align-items-center">确认密码</view>
							<view class="item-input gui-flex gui-align-items-center">
								<input class="item-input-text" type="password" name="confirmNewPaswd" @input="inputConfirmNew"
								v-model="confirmNewPaswd" placeholder="请输入新密码" placeholder-class="holder" /> 
							</view>
							<view class="arrow-right gui-list-arrow-right gui-icons gui-color-black" @click="confirmNewTipShow">&#xe601;</view>
						</view>
						<view v-show="confirmNewTips" class="gui-text-center gui-color-red gui-text-small">请输入新密码</view>
					</view>
					<view style="margin-top: 38rpx;">
						<button class="gui-button save-button gui-color-blue" formType="submit" style="border-radius: 10rpx;">
							<text class="gui-color-white gui-button-text" style="font-size: 18px;">保存</text>
						</button>
					</view>
				</form>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import { ref,getCurrentInstance,createApp } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import guiPage from '@/Grace6/components/gui-page.vue'
	import graceChecker from "@/Grace6/js/checker.js"
	import ybgolbal from "@/lib/js/ybgolbal.js"
	const app = createApp();
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	let id = ref('');
	let password = ref('');
	let oldPassword = ref('');
	let newPassword = ref('');
	let confirmNewPaswd = ref('');
	let oldTips = ref(false);
	let newTips = ref(false);
	let confirmNewTips = ref(false);
	onLoad((option)=>{
		console.log("进入密码修改页面");
		console.log(option);
		id.value = option.id;
		getData();
	})
	function getData(){
		ybapi.Backuser_GetData(id.value,function(data){
			console.log(data);
			password.value = data.data.password;
		},function(e){
			console.log(e);
		})
	}
	function inputOld(){
		oldTips.value = false;
	}
	function inputNew(){
		newTips.value = false;
	}
	function inputConfirmNew(){
		confirmNewTips.value = false;
	}
	function oldTipShow(){
		if(oldPassword.value == ''){
			oldTips.value = true
		}
	}
	function newTipShow(){
		if(newPassword.value == ''){
			newTips.value = true
		}
	}
	function confirmNewTipShow(){
		if(confirmNewPaswd.value == ''){
			confirmNewTips.value = true
		}
	}
	function submit(e){
		console.log("提交的内容")
		console.log(e)
		var formData = e.detail.value;
		console.log(formData)
		var rules = [ 
			{
				name: "oldPassword",
				checkType: "string",
				checkRule: "1,100",
				errorMsg: "旧密码输入不为空"
			},
			{
				name: "newPassword",
				checkType: "string",
				checkRule: "1,100",
				errorMsg: "新密码输入不为空"
			},
			{
				name: "confirmNewPaswd", 
				checkType : "samewith", 
				checkRule: "newPassword", 
				errorMsg:"两次密码输入不一致",
			}
		];
		
		var Result = graceChecker.check(formData, rules);
		console.log(Result)
		if(Result){
			if(password.value == oldPassword.value){
				ybapi.Backuser_UpdateData(id.value,"password",newPassword.value,function(res){
					console.log("密码更新：")
					console.log(res.updated_num==1)
					if(res.updated_num == 1){
						uni.showToast({
							title: "保存成功",
							icon: 'none',
							success() {
								uni.navigateBack()
							}
						})
					}else{
						uni.showToast({
							title: "保存失败",
							icon: 'none'
						})
					}
				},function(e){
					console.log(e);
				});
			}else{
				uni.showToast({
					title: "旧密码输入不正确",
					icon: "none"
				});
			}
		}else{
			uni.showToast({ title:graceChecker.error, icon: "none" });
		}
	}
	app.component({
		guiPage
	});
</script>

<style scoped>
	.container {
		background-color: #ffffff;
	}
	
	.form{
		padding: 20px;
	}
	
	.items-line{
		height: 120rpx;
	}
	
	.item-form{
		border-bottom: 1rpx solid lightgray;
	}
	
	.holder {
		text-align: right;
	}
	
	.item-text{
		width: 75px;
		color: black;
	}
	
	.item-input {
		margin-left: 50px;
	}
	
	.item-input-text{
		text-align: right;
		direction: rtl;
	}
	
	.arrow-right{
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 40rpx;
	}
	
	.save-button{
		background-color: #3c9cff;
	}
</style>
